Introduction

Triada is a creative, professional, responsive HTML5 Coming Soon template, perfect to keep your audience informed about the official website launch. It has been built using the new Twitter Bootstrap3 framework and can be easily and rapidly customized. Triada is built with the latest HTML5 and CSS3 technologies, is well documented and easy to setup and customize.

Please do not forget to rate Triada on ThemeForest. This can be done in Downloads area. Just select Triada in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.


Getting Started

This guide is targeted at people, who have at least basic knowledge of html markup language. Furthermore css and javascript knowledge is advised. If you do not feel yourself well with understanding these technologies you should consider finding someone to assist you.

This template can't be installed into any of available CMS (Wordpress, Drupal, etc.).

This documentation will demonstrate the custom elements used in template and help you with their customization.


Installation

Template installation is pretty easy. All required files are in every version so you can delete unused. Here are the required steps:

  1. Unzip the HTML folder
  2. Choose the desired variant
  3. Rename it to index.html
  4. Upload it through FTP

Files Structure

  • /css/ - CSS styles folder
  • /fonts/ - webfont icons folder
  • /img/ - folder for images
  • /js/ - JavaScript files folder
  • /php/ - PhP files for your contact/mailchimp form
  • /content/ - Video Background and content files folder
  • /sass/ - Syntactically Awesome Stylesheets files folder
  • index.html - main HTML file

Preloader

Each page of this template contains a preloader code by default.

									
  1. <div class="preloader"><span></span></div>

Stucture Of The Site

The obligatory stucture of the site:

											
  1. <div class="preloader"><span></span></div><!-- .preloader -->
  2.  
  3. <div class="background">
  4. <div class="layer"></div>
  5. </div><!-- .background -->
  6.  
  7. <header class="site-header">
  8. ...
  9. </header><!-- .site-header -->
  10.  
  11. <div class="main">
  12. <section id="id" class="section active">
  13. <div class="section-wrap">
  14. <div class="section-content">
  15. <div class="container">
  16. ...
  17. </div>
  18. </div><!-- .section-content -->
  19. </div><!-- .section-wrap -->
  20. </section><!-- .section -->
  21. ...
  22. </div><!-- .main -->
  23.  
  24. <footer class="site-footer">
  25. ...
  26. </footer><!-- .site-footer -->

Header

Header consists of 3 elements – Logo, Navigation and Countdown.

image
  1. <header class="site-header">
  2. <div class="row header-wrap">
  3. <div class="col-sm-5 header-box">
  4. Menu
  5. </div><!-- .header-box -->
  6. <div class="col-sm-2 header-box logo-box text-center">
  7. Logo
  8. </div><!-- .header-box -->
  9. <div class="col-sm-5 header-box text-right hidden-xs">
  10. Countdown
  11. </div><!-- .header-box -->
  12. </div>
  13. </header><!-- .site-header -->

Navigation

Navigation switches between the page sections. The attribute meaning href="#link1" must respond to the section id.

									
  1. <div class="header-box">
  2. <div id="main-menu" class="main-menu">
  3. <ul>
  4. <li>
  5. <a href="#your-id">
  6. Link 1
  7. </a>
  8. </li>
  9. </ul>
  10. </div>
  11. </div><!-- .header-box -->
  1. <section id="your-id" class="section">
  2. content
  3. </section><!-- .section -->
									
  1. <div class="header-box">
  2. <div id="main-menu" class="main-menu">
  3. <ul>
  4. <li>
  5. <a href="#link1">
  6. <span class="hidden-xs hidden-sm">Link 1</span>
  7. <span class="hidden-md hidden-lg about-icon">
  8. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve" width="25" height="25">
  9. <path fill="#333333" d="M12.5,25C5.6,25,0,19.4,0,12.5C0,5.6,5.6,0,12.5,0C19.4,0,25,5.6,25,12.5C25,19.4,19.4,25,12.5,25L12.5,25z
  10. M12.5,0.9C6.1,0.9,0.9,6.1,0.9,12.5c0,6.4,5.2,11.6,11.6,11.6c6.4,0,11.6-5.2,11.6-11.6C24.1,6.1,18.9,0.9,12.5,0.9L12.5,0.9z
  11. M11.6,20.2V9.3h1.8v10.9H11.6L11.6,20.2z M12.5,7.5c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4
  12. C13.9,6.9,13.3,7.5,12.5,7.5L12.5,7.5z"/>
  13. </svg>
  14. </span>
  15. </a>
  16. </li><!--
  17. --><li>
  18. <a href="#link2">
  19. <span class="hidden-xs hidden-sm">Link 2</span>
  20. <span class="hidden-md hidden-lg contact-icon">
  21. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29 18" enable-background="new 0 0 29 18" xml:space="preserve" width="29" height="18">
  22. <path fill="#333333" d="M26.4,0H2.6C1.2,0,0,1.2,0,2.6v12.9C0,16.8,1.2,18,2.6,18h23.7c1.5,0,2.6-1.1,2.6-2.6V2.6
  23. C29,1.2,27.8,0,26.4,0L26.4,0z M26.4,1c0.2,0,0.3,0,0.4,0.1l-12.3,9.5L2.2,1.1C2.3,1.1,2.5,1,2.6,1H26.4L26.4,1z M2.6,17
  24. c-0.2,0-0.3,0-0.4-0.1l8.4-6.5L9.8,9.7l-8.4,6.5c-0.2-0.2-0.3-0.5-0.3-0.8V2.6c0-0.3,0.1-0.6,0.3-0.8l13.2,10.2L27.7,1.7
  25. c0.2,0.2,0.3,0.5,0.3,0.8v12.9c0,0.3-0.1,0.6-0.3,0.8l-8.5-6.5l-0.8,0.7l8.4,6.5c-0.1,0-0.3,0.1-0.4,0.1H2.6L2.6,17z"/>
  26. </svg>
  27. </span>
  28. </a>
  29. </li>
  30. </ul>
  31. </div>
  32. </div><!-- .header-box -->

Countdown

Insert the final date, to which the timer will count, in the data-attibute data-date="Date". More detailed information is available on the off.site.

									
  1. <div class="header-box text-right hidden-xs">
  2. <div class="text-right">
  3. <div class="countdown-box">
  4. <div class="countdown" data-date="date"></div>
  5. </div>
  6. </div>
  7. </div><!-- .header-box -->

Footer

image
										
  1. <footer class="site-footer">
  2. <div class="container-fluid text-center">
  3. <div class="copyright">text</div>
  4. <div class="social">
  5. <a href="#"><i class="fa fa-facebook"></i></a>
  6. ...
  7. </div>
  8. </div>
  9. </footer><!-- .site-footer -->

Elements

Our theme provides different html elements, which can be used in any way with any customization.


Notify Me

By default all the information from this form is collected into the file emails.txt which is located in the root directory.

This file also must have 'Write' permissions

									
  1. <form class="under-construction" method="post">
  2. <div class="form-group email">
  3. <input class="form-control email" type="email" name="email" placeholder="Insert your e-mail">
  4. </div>
  5. <button data-hover="Send" class="btn btn-default btn-block progress-button send-email">
  6. <span class="button-label">Send</span>
  7. <span class="success">
  8. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29 23" enable-background="new 0 0 29 23" xml:space="preserve">
  9. <polyline fill="#FFFFFF" points="0.3,10.2 1.8,8.8 11.4,19.3 27.4,0.4 28.9,1.7 12.9,20.6 11.5,22.3 9.9,20.6 0.3,10.2 "/>
  10. </svg>
  11. </span>
  12. <span class="error"></span>
  13. <span class="progress"></span>
  14. </button>
  15. <div class="clearfix"></div>
  16. <span class="form-message"></span>
  17. </form>

To make the form send data to the MailChimp Service, replace the given form with one, generated at MailChimp Sevice. It must look the next way:

									
  1. <form action="" method="post" name="mc-embedded-subscribe-form" class="validate mailchimp" target="_blank" novalidate>
  2. <div id="mc_embed_signup_scroll">
  3. <div class="mc-field-group form-group">
  4. <label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
  5. <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL">
  6. </div>
  7. <div id="mce-responses" class="clear">
  8. <div class="response" id="mce-error-response" style="display:none"></div>
  9. <div class="response" id="mce-success-response" style="display:none"></div>
  10. </div>
  11. <div style="position: absolute; left: -5000px;">
  12. <input type="text" name="b_69007f000c70b89e124b9308d_1225ba8aee" tabindex="-1" value="">
  13. </div>
  14. <div class="clearfix">
  15. <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-default">
  16. </div>
  17. </div>
  18. </form>

Besides, open the file js/main.js and replace the link http://us10.list-manage.com/subscribe/post?u=69007f000c70b89e124b9308d&id=1225ba8aee with your own one.

image

Contact Form

All data from this form is sent to the email, which can be edited in the file php/contact.php.

image
										
  1. <form class="contact-form" method="post">
  2. <div class="row">
  3. <div class="col-sm-6 form-group name">
  4. <input type="text"
  5. class="form-control"
  6. name="name"
  7. placeholder="Name"
  8. data-animation="fadeInLeft"
  9. data-animation-delay="100"
  10. data-out-animation="fadeOutLeft"
  11. data-out-animation-delay="900">
  12. </div>
  13. <div class="col-sm-6 form-group email">
  14. <input type="email"
  15. class="form-control"
  16. name="email"
  17. placeholder="Email"
  18. data-animation="fadeInLeft"
  19. data-animation-delay="100"
  20. data-out-animation="fadeOutLeft"
  21. data-out-animation-delay="900">
  22. </div>
  23. </div>
  24. <div class="form-group comment">
  25. <textarea class="form-control"
  26. name="comment"
  27. placeholder="Message"
  28. data-animation="fadeInLeft"
  29. data-animation-delay="100"
  30. data-out-animation="fadeOutLeft"
  31. data-out-animation-delay="900"></textarea>
  32. </div>
  33. <div class="button-box text-center">
  34. <button type="submit"
  35. data-hover="Send"
  36. class="btn btn-white progress-button btn-submit"
  37. data-animation="fadeInDown"
  38. data-animation-delay="900"
  39. data-out-animation="fadeOutUp"
  40. data-out-animation-delay="100">
  41. <span class="button-label">Send</span>
  42. <span class="success">
  43. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29 23" enable-background="new 0 0 29 23" xml:space="preserve">
  44. <polyline fill="#FFFFFF" points="0.3,10.2 1.8,8.8 11.4,19.3 27.4,0.4 28.9,1.7 12.9,20.6 11.5,22.3 9.9,20.6 0.3,10.2 "/>
  45. </svg>
  46. </span>
  47. <span class="error"></span>
  48. <span class="progress"></span>
  49. </button>
  50. <div class="clearfix"></div>
  51. <span class="form-message"></span>
  52. </div>
  53. </form>

Map

image
  1. <div
  2. class="map-canvas"
  3. data-zoom="6"
  4. data-lat="40.748441"
  5. data-lng="-73.985664"
  6. data-title="Title"
  7. data-content="Content"></div>

You can customize the element map-canvas with these attributes:

  1. data-zoom - map zoom
  2. data-lat - map lattitude
  3. data-lng - map longtitude
  4. data-type - map type, can be satellite, hybrid, terrain
  5. data-scrollwheel - opportunity to scroll the map with mouse wheel
  6. data-title - marker title
  7. data-content - marker description

Carousel

The carousel may contain the elements, which you can find on our demo pages.

image
										
  1. <div class="carousel-box">
  2. <div class="carousel">
  3. <div class="item" data-animation="fadeInUp" data-animation-delay="100" data-out-animation="fadeOutUp" data-out-animation-delay="100">
  4. ...
  5. </div>
  6. </div><!-- .carousel -->
  7. <div class="carousel-controls">
  8. <a href="#" class="nav-item prev">
  9. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 11" enable-background="new 0 0 10 11" xml:space="preserve" width="10" height="11">
  10. <path fill="#ffffff" d="M10,6H0V5h10V6L10,6z M0,6V5l5-5l1,0L0,6z M5,11L0,6V5l6,6L5,11z"/>
  11. </svg>
  12. </a>
  13. <a href="#" class="nav-item next">
  14. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 11" enable-background="new 0 0 10 11" xml:space="preserve" width="10" height="11">
  15. <path fill="#ffffff" d="M0,6V5h10v1H0L0,6z M4,0h1l5,5v1L4,0z M4,11l6-6v1l-5,5L4,11z"/>
  16. </svg>
  17. </a>
  18. </div>
  19. </div><!-- .carousel-box -->

Full Video

image
										
  1. <a href="#"
  2. class="show-video"
  3. data-toggle="modal"
  4. data-target="#video">
  5. <img src="img src" alt="">
  6. <span class="icon"><i class="fa fa-play"></i></span>
  7. </a><!-- .show-video -->
  8.  
  9. <div class="modal fade full-modal" id="video" tabindex="-1" role="dialog" aria-hidden="true">
  10. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  11. <span aria-hidden="true">×</span>
  12. </button>
  13. <div class="modal-dialog">
  14. <div class="container modal-content">
  15. <div class="content-wrap">
  16. <div class="content-align">
  17. <div class="video-box vimeo-video text-center" data-autoplay="true">
  18. <iframe src="" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </div><!-- .full-modal -->

Twitter Widget

image
										
  1. <div class="twitter-widget">
  2. <a class="twitter-timeline"
  3. width="100%"
  4. href="https://twitter.com/ItemBridge"
  5. data-widget-id="446943467755696128"
  6. data-tweet-limit="1"
  7. data-show-replies="false"
  8. data-chrome="noheader nofooter noborders noscrollbar transparent">
  9. @ItemBridge
  10. </a>
  11. </div>

Animation

You can choose the animation type for every page element – how it will appear after page downloading and how it will disappear after switching page sections. For this you will need to use the necessary attribute:

  • data-animation - animation while downloading
  • data-animation-delay - animation delay while downloading
  • data-out-animation - animation while switching to other page section
  • data-out-animation-delay - animation delay while switching to other page section

You can check how these animation types look like here.

								
  1. <a href="#"
  2. data-animation="fadeInDown"
  3. data-animation-delay="600"
  4. data-out-animation="fadeOutUp"
  5. data-out-animation-delay="600">Link</a>

Backgrounds

Our template supports different types of background. It may be just an image, the image with color overlay and video background. So, how we can insert our background into the html code? Have a look:

								
  1. <div class="background">
  2. <div class="layer background-image"></div>
  3. <div class="layer background-overlay"></div>
  4. </div><!-- .background -->

Background Image

Apply necessary background image in the file _background.scss for the class background-image.

  1. <div class="background">
  2. <div class="layer background-image"></div>
  3. </div><!-- .background -->

Background Slider

The slideshow has the following settings:

  • data-timeout - the delay between the slides change
  • data-animate-in - starting slide animation
  • data-animate-out - ending slide animation

You can check how these animation types look like here.

  1. <div class="layer background-slider" data-timeout="2000" data-animate-in="fadeIn" data-animate-out="fadeOut">
  2. <div class="item" style="background-image: url(img/slide-1.jpg);"></div>
  3. <div class="item" style="background-image: url(img/slide-2.jpg);"></div>
  4. </div>

Background Overlay

Apply necessary color in the file _background.scss fo the class background-overlay.

									
  1. <div class="background">
  2. <div class="layer background-overlay"></div>
  3. </div><!-- .background -->

Video Background

Indicate the path to the video in 3 formats in the tag source.

									
  1. <div class="background">
  2. <div class="layer background-video">
  3. <video autoplay="" muted="" loop="">
  4. <source src="video.ogv" type="video/ogg">
  5. <source src="video.webm" type="video/webm">
  6. <source src="video.mp4" type="video/mp4">
  7. </video>
  8. </div>
  9. </div><!-- .background -->

YouTube Video Background

Indicate your video id in the data-attribute data-video.

									
  1. <div class="background">
  2. <div class="layer background-video" data-video="id"></div>
  3. </div><!-- .background -->

Retina

Retina Ready is a feature for displaying the high resolution images on the modern devices. It is created to show the true view of the HD images.

In our theme to enable the Retina for images you should have two images:

  • first one has the standard size and a standard name (slide-2.jpg)
  • second one must be twice bigger then the origin and have additional annex @2x (slide-2@2x.jpg

Both images must be in the same folder!

So, how we can enable it in our html template? You should insert a class replace-2x into the 'img' tag. Example:

  1. <img class="replace-2x" src="images/slide-2.jpg" alt="">

This is an example of CSS code that displays how we can connect our Retina image to the original image of the background:

  1. .part-2 {
  2. background-image: url('../images/slider/slide-2.jpg');
  3. }
  4. @media (-webkit-min-device-pixel-ratio: 2) {
  5. .part-2 { background-image: url('../images/slider/slide-2@2x.jpg');
  6. background-size: cover; }
  7. }

SCSS

All SCSS files are located in the folder /sass/. SCSS is a CSS preprocessor that adds many features like variables, mixins, imports, color manipulation, functions and tons of other powerful features.

The entire compiler comes in a single class file ready for including in any kind of project in addition to a command line tool for running the compiler from the terminal.

The configuration of the paths for compilation is located in the file config.rb. The structure:

  • /bootstrap/ - folder with bootstrap variables
  • bootstrap.scss - file that imports all variables from all files
  • style.scss - imports all styles
  • _theme-variables.scss - file with variables used in theme styles
  • _typography.scss - the customization of fonts
  • _background.scss - file with background styles
  • _carousels.scss - file with carousels styles
  • _content.scss - file with content styles
  • _footer.scss - file with footer styles
  • _header.scss - file with header styles
  • _helper-classes.scss - file with helper classes styles
  • _main.scss - file with main styles
  • _preloader.scss - file with preloader styles
  • _structure.scss - file with layout structue styles

CSS Files

Name Description Location
Animate.css Just-add-water CSS animations css/animate.css
Font Awesome Styles for Font Awesome css/font-awesome.min.css
Bootstrap Defines main Bootstrap classes css/bootstrap.css
Bootstrap Select Styles for Selectes css/bootstrap-select.min.css
OWL Carousel Styles for OWL Carousel css/owl.carousel.css
jQuery custom content scroller Styles for jQuery custom content scroller css/jquery.mCustomScrollbar.min.css
Theme styles Contains all of the specific stylings for the theme. css/style.css

JavaScript Files

Name Description Location
jQuery Core Javascript library js/jquery-1.9.1.min.js, js/jquery-2.1.3.min.js
Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development js/bootstrap.min.js
Bootstrap-select A custom select for @twitter Bootstrap using button dropdown. js/bootstrap-select.min.js
Vimeo API How to control the Vimeo embedded player with JavaScript. js/froogaloop2.min.js
ajaxChimp Ajaxify your mailchimp form. js/jquery.ajaxchimp.min.js
jQuery Countdown A jQuery plugin that sets a div or span to show a countdown to a given time. js/jquery.countdown.min.js
jQuery custom content scroller Highly customizable custom scrollbar jQuery plugin. js/jquery.mCustomScrollbar.min.js
OWL Carousel Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. js/owl.carousel.min.js
Included plagins js/included-plagins.js
Theme scripts Contains all of the specific scripts for the theme. js/main.js

Code copied to clipboard